<template>
  <div
    class="line"
    :style="{
        backgroundColor: color,
        margin: margin,
        top: offsetY,
    }"
  >

  </div>
</template>

<script>
export default {
  name: "LineComponent",
  props: {
    color: {
      type: String,
      dafault: "black",
    },
    margin: {
      type: String,
      dafault: "0",
    },
    offsetY: {
      type: String,
      default: "0",
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.line {
  position: relative;
  flex: 1;
  height: 1px;

  @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    transform: scaleY(0.75);
  }

  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    transform: scaleY(0.5);
  }

  @media screen and (-webkit-min-device-pixel-ratio: 3) {
    transform: scaleY(0.33);
  }
}
</style>